<template>
	<view class="">
		<view class="video-box">
			<zy-video v-if="currentVideoUrl"
				:ref="'videoRef'"
				:refi="'videoRef'"
				:width="utils.getpx(750)"
				:height="utils.getpx(422)"
				:initialTime="currentTime"
				@playVideo="playVideo"
				@pauseVideo="pauseVideo"
				:src="api.xiaodeObsUrl+currentVideoUrl"></zy-video>
			<view v-else-if="!videoLoading">
				<image v-if="curriculumInfo.picture" class="rb-bg" :src="api.xiaodeObsUrl+curriculumInfo.picture" mode="aspectFill"></image>
				<view v-else-if="curriculumInfo.id" class="rb-bg">
					<image src="/static/campus/tj-bg.png" mode="widthFix"></image>
					<view class="rb-bg-box">
						<text>{{curriculumInfo.name.length>=8 ? curriculumInfo.name.slice(0, parseInt(curriculumInfo.name.length/2)) : curriculumInfo.name}}</text>
						<text v-if="curriculumInfo.name.length>=8">{{curriculumInfo.name.slice(parseInt(curriculumInfo.name.length/2))}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="course-info">
			<view class="title-tag">
				<text>{{curriculumInfo.name}}</text>
				<text class="tag" :style="{background: utils.tagBgColor(label)}" v-for="(label, Linx) in labelHandle(curriculumInfo.labels)" :key="Linx">{{label}}</text>
			</view>
			<view class="tea-number">
				<text>·授课老师<text class="name">{{curriculumInfo.lecturer}}</text></text>
				<text>{{curriculumInfo.view_num}}次观看</text>
			</view>
		</view>
		<view class="line-box"></view>
		<view class="tab">
			<text :class="['text', {'active': tabActive==inx}]" @click="tabChange(inx)" v-for="(tab, inx) in tabs" :key="inx" :style="{display: inx==2&&currentVideoId?'none':'inline-block'}">{{tab}}<text class="tag"></text></text>
		</view>
		<view class="course-desc" v-if="tabActive==0">
			<view class="modile-title">课程介绍</view>
			<text class="content">{{curriculumInfo.brief}}</text>
		</view>
		<view class="course-outline" v-else-if="tabActive==1">
			<view class="modile-title">课程大纲</view>
			<view class="chapter-box" :class="{'chapter-hid': chapter.putAway}" v-for="chapter in chapterDivisionList" :key="'chapter'+chapter.id">
				<view class="chapter-title">
					<text>{{chapter.name}}</text>
					<image src="/static/campus/sq-zk.png" :style="{transform: `rotate(${chapter.putAway?'180deg':'0'})`}" mode="widthFix" @click="openBox(chapter)"></image>
				</view>
				<view class="class-hour" v-for="division in chapter.divisionList" :key="'division'+division.id">
					<text class="hour-title">{{division.name}}</text>
					<view class="file-item" v-for="divisionFile in division.divisionFileList" :key="'divisionFile'+divisionFile.id">
						<view class="tag-name" @click="getVideoRate(divisionFile.id, divisionFile.url, divisionFile.is_video, divisionFile.name)">
							<text class="tag" :class="{tag1: !divisionFile.is_video}">{{divisionFile.is_video?'视频':'文档'}}</text>
							<text :style="{color: divisionFile.id==currentVideoId?'#28C2CD':'#666666'}">{{divisionFile.name}}</text>
						</view>
						<image class="download" src="/static/campus/xiazai.png" mode="widthFix" @click="downloadDivFile(divisionFile.url, divisionFile.name, divisionFile.is_video)"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="com-box" v-else>
			<view class="modile-title" style="margin-top: 0">
			</view>
			<view class="eva-list" v-if="totalCommentRow>0">
				<view class="eva-item" v-for="(item, index) in commentList" :key="index">
					<view :class="['eva-info-head']" @click="replyEval(item, item.id)">
						<image class="head" @click.stop="utils.userDetails(item.create_account_id, item.user_type)" :src="evaHeadHandle(item.u)" mode="aspectFill"></image>
						<view class="eva-info" :class="{'border-bottom': item.ccZList.length==0}">
							<view>
								<view class="name-time-likes">
									<view class="eva-name-time">
										{{allMembers[item.create_account_id].name}}
										<!-- <text class="table">{{item.monthStar?'（月度之星）':''}}</text> -->
										<text class="time">{{dateHandle(item.updateTime)}}</text>
										<text class="del-eva" v-if="item.create_account_id==userAccountId" @click.stop="deleComment(item.id, commentList, index)">删除</text>
									</view>
									<view class="like-num" @click.stop="praiseComment(item)">
										<uni-icons type="hand-up" size="44rpx" :color="item.isLike?'#28C2CD':'#333'"></uni-icons>
										<text class="num" v-if="item.praise_num>0">{{item.praise_num}}</text>
									</view>
								</view>
								<view class="content eva-cont">
									<text-editor :id-name="`editorEva${index}`" :read-only="true" 
									:info="{content: item.comments, height: 'auto'}"></text-editor>
								</view>
								
							</view>
						</view>
					</view>
					<view class="reply-list border-top" v-if="item.ccZList.length>0">
						<view class="reply-item" v-for="(com, comInx) in item.ccZList" :key="com.id" @click.stop="replyEval(com, com.id, item.id)">
							<image class="head" :src="evaHeadHandle(com.u)" mode="aspectFill"></image>
							<view class="eva-info">
								<view class="name-time-likes">
									<view class="eva-name-time">
										{{allMembers[com.create_account_id].name}}
										<text class="time">{{dateHandle(com.addTime)}}</text>
										<text class="del-eva" v-if="com.create_account_id==userAccountId" @click.stop="deleComment(com.id, item.ccZList, comInx)">删除</text>
									</view>
									<view class="like-num" @click.stop="praiseComment(com)">
										<uni-icons type="hand-up" size="44rpx" :color="com.isLike?'#28C2CD':'#333'"></uni-icons>
										<text class="num" v-if="com.praise_num>0">{{com.praise_num}}</text>
									</view>
								</view>
								<view class="content" style="display: flex;">
									<text v-if="com.uf" style="color: #666666;margin-right: 10rpx;white-space: nowrap">回复{{com.uf.name}}</text>
									<text-editor :id-name="`editorEvaReply${com.id}`" :read-only="true" 
									:info="{content: com.comments, height: 'auto'}"></text-editor>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-more">
					<uni-load-more :status="com_load_more" :content-text="contentText"></uni-load-more>
				</view>
			</view>
			
			<view v-else class="no-eva">
				暂无评论
			</view>
			<view class="eva-text-btn">
				<view class="input-box">
					<view class="eva-box">
						<view class="eva-input-box" :style="{width: replyId?'85%':'100%'}">
							<!-- <text class="reply-name" v-if="replyName">回复{{replyName}}：</text> -->
							<view style="width: 80%;max-height: 180rpx;overflow-y: scroll;">
								<text-editor :id-name="`editor`" ref="editor" 
								:info="comInfo"></text-editor>
							</view>
							<image class="icon" @click="showEmoji=!showEmoji" src="/static/chat/bq.png" mode="aspectFill"></image>
							<image class="icon" @click="addComments()" src="/static/send-com.png" mode="aspectFill"></image>
						</view>
						<text class="re-close" v-if="replyId" @click="closeReply">关闭</text>
					</view>
					<view class="emoji-list" v-if="showEmoji">
						<view class="em-icon" @click="clickEmoji(str)" v-for="(str, i) in utils.emojiList" :key="i"><text>{{str}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import textEditor from '../student/components/text-editor.vue'
export default {
    components: {
        textEditor
    },
    data() {
        return{
			userAccountId: '',
			tabActive: 0,
			tabs: [],
			commentList: [],
			com_load_more: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: ' ',
				contentnomore: "- 没有更多了 -"
			},
			currentTime: 0,
			currentVideoUrl: '',
			currentVideoId: '',
			videoLoading: false,
			// 评论
			comPage: 1,
			replyId: '',
			replyTopId: '',
			showEmoji: false,
			comInfo: {content: '', height: '24px', type: 'commend', placeText: '写点什么鼓励一下吧'},
			totalCommentRow: '',
			
			curriculumId: null,
			curriculumInfo: {},
			chapterDivisionList: [],
			allMembers: []
        }
    },
	onLoad(options){
		this.curriculumId = options.id;
		// 定位到精彩评论
		this.tabActive = options.tab>0?options.tab: 0
		if(options.tab){
			this.tabChange(this.tabActive)
		}
		this.getCurriculumInfo(options.id)
		this.allMembers = uni.getStorageSync('allFindMembers')||[]
	},
	onReachBottom(){
		if(this.load_more == 'no-more') return;
		this.comPage ++
		this.com_load_more = 'loading'
		this.getComment()
	},
	methods: {
		// 标签处理
		labelHandle(str){
			if(!str) return;
			if(str.indexOf(';')!=-1){
				return str.split(';')
			}
			if(str.indexOf('；')!=-1){
				return str.split('；')
			}
			
			return [str]
		},
		// 获取课程
		getCurriculumInfo(){
			this.api.get('happy/getCurriculumInfo', {
				curriculumId: this.curriculumId
			}).then(res=>{
				if(res.data.state!='ok') return
				this.curriculumInfo = res.data.curriculum;
				this.totalCommentRow = this.curriculumInfo.interaction_num
				this.tabs = ['课程介绍', '课程大纲', '互动('+this.totalCommentRow+')'];
			})
		},
		// 获取课程大纲
		getChapterDivision(){
			this.api.get('happy/getChapterDivision', {
				curriculumId: this.curriculumId,
			}).then(res=>{
				if(res.data.state!='ok') return
				this.chapterDivisionList = res.data.chapterList;
			})
		},
		dateHandle(date){
			let str = this.utils.dateFormat(date.split(' ')[0]);
			let curYear = new Date().getFullYear()
			if(date.split('-')[0]==curYear){
				str = str.split('年')[1]
				str = str.split('月').join('-')
			}
			return str
		},
		// 处理评价头像
		evaHeadHandle(info){
			info.userType = info.user_type
			return this.utils.headImage(info)
		},
		// 获取评论
		getComment(){
			this.userAccountId = getApp().globalData.userInfo.accountId;
			this.api.get('happy/getComment', {
				curriculumId: this.curriculumId,
				page: this.comPage,
				limit: 10
			}).then(res=>{
				if(res.data.state!='ok') return
				let list = res.data.ccPage.list
				if(list.length<10){
					this.com_load_more = 'no-more'
				}
				this.commentList = this.commentList.concat(list)
				this.totalCommentRow = res.data.interactionNum
				this.tabs = ['课程介绍', '课程大纲', '互动('+this.totalCommentRow+')'];
			})
		},
		// 获取第二层的评论
		getfindSecondComments(id, comment, type){
			this.$set(comment, 'showReply', true)
			
		},
		// 删除评论
		deleComment(id, list, i){
			let fun = () => {
				this.api.post('happy/deleComment', {
					commentId: id
				}).then(res=>{
					if(res.data.state!='ok') return
					list.splice(i, 1)
					this.tabChange(2)
				})
			}
			this.utils.showModal('', '确认删除这条评论吗？', fun)
			
		},
		// 播放视频
		playVideo(refi){
			this.$refs.videoRef.pauseVideo();
		},
		pauseVideo(t){
			this.currentTime = Math.round(t)
			let userType = getApp().globalData.userInfo.user_type;
			
			
			if(userType==2){
				this.recordUserViewRate()
			}else{
				this.currentVideoUrl = ''
				this.currentVideoId = ''
			}
		},
		tabChange(inx){
			this.tabActive = inx
			if(this.tabActive == 1){
				this.getChapterDivision()
			}
			if(this.tabActive == 2){
				this.comPage = 1
				this.commentList = []
				this.getComment()
			}
		},
		recordUserViewRate(){
			this.api.post('happy/recordUserViewRate', {
				divisionFileId: this.currentVideoId,
				rate: this.currentTime
			}).then(res=>{
				this.currentVideoUrl = ''
				this.currentVideoId = ''
			})
		},
		getVideoRate(id, url, isVideo, name){
			if(!isVideo){
				this.openFile(url, name, isVideo)
				return
			}
			let userType = getApp().globalData.userInfo.user_type;
			this.videoLoading = true
			this.currentVideoUrl = ''
			this.currentVideoId = id
			
			this.api.get('happy/getVideoRate', {
				divisionFileId: id
			}).then(res=>{
				this.videoLoading = false
				if(res.data.state != 'ok') return;
				if(userType==1){
					this.currentVideoUrl = url
					this.videoLoading = false
				}
				let vur = res.data.vur
				this.currentTime = vur ? vur.rate_n : 0
				this.currentVideoUrl = url
			})
		},
		// 添加评论
		addComments(){
			if(!this.comInfo.content){
				this.utils.showToast('评论内容不能为空')
				return
			}
			let params = {
				curriculumId: this.curriculumId,
				comment: this.comInfo.content,
			}
			if(this.replyId){
				params.commentsId = this.replyId
				params.topCommentsId = this.replyTopId
			}
			this.api.get('happy/createComment', params).then(res=>{
				if(res.data.state!='ok') return
				this.isRefresh = true
					// uni.showToast({
					//     title: '评价成功',
					//     icon: 'none',
					//     duration: 2000,
					//     mask: true
					// });
					// this.commentContent = ''
					this.$refs.editor.closeHtml()
					this.showEmoji = false;
					if(this.replyId){
						// this.getfindSecondComments(this.replyTopId, this.currentEval, 'add')
						this.tabChange(2)
					}else{
						this.tabChange(2)
					}
			})
		},
		// 回复评论
		replyEval(item, comId, topId){
			if(this.replyId == comId) {
				this.$set(this.comInfo, 'placeText', '写点什么鼓励一下吧')
				this.replyId = '';
				this.eva_focus = false
				return
			}
			this.currentEval = item;
			this.eva_focus = true;
			this.$set(this.comInfo, 'placeText', '@'+item.u.name)

			this.replyId = comId
			this.replyTopId = topId || comId
		},
		
		// 进行评论
		createComment(id){
			this.api.get('happy/createComment', {
				curriculumId: id,
				comment: '',
				commentsId: '',
				topCommentsId: ''
			}).then(res=>{
				if(res.data.state!='ok') return

			})
		},
		// 点赞评论
		praiseComment(item){
			this.api.post('happy/praiseComment', {
				commentId: item.id
			}).then(res=>{
				if(res.data.state!='ok') return
				this.$set(item, 'isLike', !item.isLike)
				// this.getComment()
				let num = item.praise_num;
				if(item.isLike){
					num += 1
					
				}else{
					num -= 1
				}
				this.$set(item, "praise_num", num)
			})
		},
		closeReply(){
			this.$set(this.comInfo, 'placeText', '写点什么鼓励一下吧')
			this.replyId = '';
			this.eva_focus = false
		},
		clickEmoji(page){
            this.$refs.editor.clickEmoji(page)
        },
		// 下载文件
		// #ifdef APP-PLUS
		downloadDivFile(downloadUrl, name){
			uni.showLoading({
				title: '下载中',
				mask: true
			});
			let that = this
			uni.downloadFile({
				url: this.api.xiaodeObsUrl+downloadUrl, //资源
				success: (res) => {
					uni.hideLoading()
					if (res.statusCode === 200) {
						let tempFilePath = res.tempFilePath
						let list = ['png', 'jpg','jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff', 'avi', 'wmv', 'mpg', 'mpeg', 'mov', 'rm', 'ram', 'swf', 'mp4', 'mp3', 'wma', 'rmvb', 'flv', 'mkv']
						let type = downloadUrl.split('.').pop()
						if(list.indexOf(type)!=-1){
							uni.saveVideoToPhotosAlbum({
								filePath: tempFilePath,
								success: function (res) {
									that.utils.showToast(`已保存到相册`);
								},
								fail:(errMsg)=>{
									that.utils.showToast('保存失败');
								}
							});  
						}else{
							uni.saveFile({
								tempFilePath: tempFilePath,
								success: function (res) {
									that.utils.showToast(`已保存到${res.savedFilePath}`);
								},
								fail:(errMsg)=>{
									that.utils.showToast('保存失败');
								}
							});  
						}
						
					}
				}
			});
		},
		// #endif
		// #ifdef H5
		playpapers(url, name, isVideo){
			
			uni.showLoading({
				title: '下载中',
				mask: true
			});
			
			if(isVideo){
				
				fetch(url).then(res => res.blob()).then(blob => {
					console.log(479)
					const a = document.createElement('a');
					document.body.appendChild(a)
					a.style.display = 'none'
					const url = window.URL.createObjectURL(blob);
					a.href = url;
					a.download = name;
					a.click();
					document.body.removeChild(a)
					window.URL.revokeObjectURL(url);
					console.log(488)
					uni.hideLoading()
				});
			}else{
				
				let downLoadImage = (obj, name) => {
					var xhr  = new XMLHttpRequest();
					xhr.open("get", obj, true);
					xhr.responseType = "blob";
					xhr.onload = function() {
						uni.hideLoading()
						if (this.status == 200) {
							const url = window.URL.createObjectURL(new Blob([this.response]));
							const link = document.createElement('a');
							link.style.display = 'none';
							link.href = url;
							const fileName = name;
							link.setAttribute('download', fileName);
							document.body.appendChild(link);
							link.click();
							document.body.removeChild(link);
						}
					};
					xhr.send();
					
				}
				downLoadImage(url, name)
			}
		},
		downloadDivFile(path, name, isVideo){
			this.api.get('file/xiaodeGetDownloadUrl', {
				fileNames: JSON.stringify([path]),
				isThumbnail: false
			}).then(res=>{
				if(res.data.state != 'ok') return
				let downloadUrl = res.data.downloadUrl || {},
				urls = [];
				urls = Object.values(downloadUrl)[0]
				this.playpapers(urls, name, isVideo)

			})
		},
		// #endif
		openFile (url, name, isVideo) {
			// #ifndef H5
			uni.downloadFile({
				url: this.api.xiaodeObsUrl+url,
				success: function (res) {
					var filePath = res.tempFilePath;
					uni.openDocument({
						filePath: filePath,
						success: function (res) {
							// console.log('打开文档成功');
						},
						fail: function(err){
							// console.log(err);
						}
					});
				}
			});
			// #endif
			// #ifdef H5
			this.downloadDivFile(url, name, isVideo)
			// #endif
		},
		openBox(item){
			let flag = !item.putAway
			this.$set(item, 'putAway', flag)
		}
	}
}
</script>
<style lang="less" scoped>
	.video-box{
		min-height: 422rpx;
	}
	.rb-bg{
        width: 100%;
		height: 422rpx;
		position: relative;
		image{
			width: 100%;
		}
		
    }
	
	// @font-face{
	// 	font-family: 'syht';
	// 	src: url(../../common/syht/SourceHanSans-Bold.otf);
	// }
	.rb-bg-box{
		top: 110rpx;
		position: absolute;
		width: 100%;
		z-index: 1;
		font-size: 66rpx;
		color: #fff;
		font-weight: bold;
		height: 200rpx;
		// font-family: syht;
		line-height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.course-info{
		padding: 24rpx 32rpx;
	}
	.title-tag{
		color: #333;
		font-size: 30rpx;
		.tag{
			margin: 0 16rpx;
			padding: 4rpx 8rpx;
			font-size: 22rpx;
			line-height: 30rpx;
			color: #fff;
			border-radius: 8rpx;
		}
	}
	.tea-number{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		font-size: 26rpx;
		.name{
			margin-left: 10rpx;
			color: #28C2CD;
		}
	}
	.line-box{
		background-color: #F9F9F9;
		height: 20rpx;
	}
	.tab{
		margin-top: 38rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		.text{
			width: 33%;
			display: inline-block;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
		}
		.active{
			color: #28C2CD;
			position: relative;
			.tag{
				position: absolute;
				bottom: -10rpx;
				left: calc(50% - 21rpx);
				height: 6rpx;
				width: 42rpx;
				border-radius: 3rpx;
				background-color: #28C2CD;
			}
		}
		
	}
	.modile-title{
		margin-top: 50rpx;
		padding-bottom: 24rpx;
		font-size: 32rpx;
		color: #262E3F;
		line-height: 45rpx;
		font-weight: bold;
	}
	.course-desc, .course-outline, .com-box{
		padding: 0 32rpx;
		overflow: hidden;
		.content{
			line-height: 45rpx;
			color: #666666;
		}
	}
	.chapter-box{
		border: 2rpx solid #EEEEEE;
		padding: 24rpx 32rpx;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
	}
	.chapter-hid{
		height: 42rpx;
		overflow: hidden;
	}
	.chapter-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		line-height: 42rpx;
		color: #333333;
		image{
			width: 14rpx;
			height: 10rpx;
			
		}
	}
	.class-hour{
		margin-top: 24rpx;
		margin-left: 22rpx;
		color: #333333;
	}
	.file-item{
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.download{
			width: 24rpx;
			height: 21rpx;
		}
		
	}
	.tag-name{
		color: #666666;
		font-size: 24rpx;
		.tag{
			margin-right: 12rpx;
			padding: 0 8rpx;
			line-height: 30rpx;
			font-size: 22rpx;
			border: 1rpx solid #1677FF;
			color: #1677FF;
			border-radius: 8rpx;
		}
		.tag1{
			color: #FF6010;
			border-color: #FF6010;
		}
	}
	// 评论
	.eva-list{
		// height: 642rpx;
		// overflow-y: scroll;
	}
	.reply-item{
		display: flex;
		align-items: center;
		padding: 32rpx 0;
	}
	.eva-item, .reply-item{
		
		.head{
			width: 64rpx;
			height: 64rpx;
			min-width: 64rpx;
			border-radius: 32rpx;
		}
	}
	.eva-item{
		// border-bottom: 1rpx solid #EEEEEE;
	}
	.eva-info-head{
		padding: 24rpx 0;
		display: flex;
		align-items: flex-start;
		&:active{
			background: #f2f2f2;
		}
		border-bottom: 1rpx solid #EEEEEE;
	}
	.eva-info{
		width: calc(100% - 64rpx);
		margin-left: 20rpx;
		&.border-bottom{
			padding-bottom: 32rpx;
		}
		
		.content{
			margin-top: 8rpx;
			line-height: 40rpx;
			font-size: 26rpx;
			
		}
	}
	.bottom-line{
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid #f2f2f2;
	}
	.comments-num{
		margin: 20rpx 0 0 88rpx;
		color: #d7d7d7;
		text{
			margin: 0 10rpx;
			color: #333;
		}
	}
	.reply-list{
		margin-left: 88rpx; 
		position: relative;
	}
	.name-time-likes{
		// height: 56rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.del-eva{
			color: #FF4F01;
			margin-left: 16rpx;
		}
		.time{
			margin-left: 20rpx;
			color: #999;
		}
		.like-num{
			display: flex;
			align-items: center;
		}
		.num{
			margin-left: 10rpx;
		}
	}
	.eva-text-btn{
		height: 114rpx;
	}

	.input-box{
		position: fixed;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */
		bottom: 0;
		background: #fff;
	}	
	.eva-box{
		
		padding: 20rpx 32rpx;
		display: flex;
		align-items: center;
		background-color: #F9F9F9;
		.re-close{
			margin-left: 16rpx;
			display: inline-block;
			width: 100rpx;
			min-width: 100rpx;
			white-space: nowrap;
			font-size: 28rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 10rpx;
			background-color: #f2f2f2;
			text-align: center;
		}
	}
	.eva-input-box{
		width: 100%;
		min-height: 70rpx;
		border-radius: 20rpx;
		background-color: #ECECEC;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding: 15rpx 32rpx;
		box-sizing: border-box;
		input{
			width: 90%;
			margin-right: 20rpx;
			font-size: 26rpx;
		}
		.icon{
			width: 44rpx;
			height: 44rpx;
		}
		.reply-name{
			white-space: nowrap;
			margin-right: 8rpx;
		}
	}
	.no-eva{
		text-align: center;
		line-height: 70rpx;
	}
	// 表情列表
	.emoji-list{
        padding: 20rpx 32rpx;
		max-height: 440rpx;
		overflow-y: scroll;
		// padding: 0 36rpx;
		.em-icon{
			display: inline-block;
			width: 70rpx;
			text-align: center;
			margin-right: 14rpx;
			margin-bottom: 14rpx;
		}
		text{
			font-size: 52rpx;
			
			&:nth-child(8n){
				margin-right: 0;
			}
		}
	}
	.no-more{
		padding: 24rpx;
		color: #BFBFBF;
		text-align: center;
	}
</style>
